<template>
  <div id="header">
      <div class="cityname">
          上海
      </div>
      <div class="app-name">
          梵舍
      </div>
      <div class="search"  @click="gotoselect">
          <mu-icon class="material-icons" value="search" />
      </div>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    export default {
        name: 'header', //组件的名字
        data() {
            return { //数据
                msg: 'she'
            }
        },
        methods: { //方法
            gotoselect() {
                this.$router.push({
                    path: '/select'
                })
            }
        },
        computed: { //计算 用来引入vuex里面state

        },
        mounted: function() { //组件加载完成

        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件



        }
    }
</script>
<style scoped lang="scss">
    #header {
        display: flex;
        height: 48px;
        line-height: 48px;
        background: #333;
        .cityname {
            flex: 1;
            text-align: center;
            color: #fff;
        }
        .app-name {
            flex: 5;
            position: relative;
            text-align: center;
            font-size: 16px;
            color: #fff;
        }
        .search {
            flex: 1;
            line-height: 64px;
            text-align: center;
            color: #fff;
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->